<!DOCTYPE html>
<html style="width:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>文章详情</title>
    <link rel="stylesheet" href="../../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/frame1/frame1-details.css">

    <style>
    img {
      /*max-width: 14rem !important;*/
      text-align: center!important;
    }
    .detail_header .right{
      vertical-align: top;
      font-size: 1.3rem;
      float: right;
    }
    </style>
</head>

<body style="background-color:rgb(255, 255, 255);color:rgb(57, 57, 57);margin:0;padding:0;width:100%;">
    <div id="detail_box">

    </div>
    <!-- 评论 -->
    <!-- <div id="btn">
      <span>立&nbsp;即</br>预&nbsp;订</span>
    </div> -->


    <div id="btn2">
      <span>立&nbsp;即</br>预&nbsp;订</span>
    </div>
    <!-- 立即预定 -->
    <div class="order">
        <div class="shade">
            <div class="box">
                <input type="text" name="username" val="" placeholder="姓名">
                <input type="number" name="usertel" val="" placeholder="手机号">
                <p>为确保我们能及时联系您，请认证填写真实有效的信息。</p>
                <div class="sibmit">
                    <button id="submit">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 预定成功页面 -->
    <div class="success">
        <div class="shade2">
            <div class="success_box">
                <p>预订完成！</p>
                <p>请保持预留手机畅通</p>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../lib/artTemplate/template.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/dns.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/html" id="getactiveList">
  <div class="detail_header" style="z-index:2">
      <span class="iconfont icon-fanhui" onclick="api.closeWin()"></span>
      <span>{{merchant.title}}</span>
      <span id="share_wx" onclick="share_wx();" class="iconfont icon-fenxiangdaozhuanfafasongzhiyuanquanxianxing right"></span>
  </div>
  <div class="content" style="padding-top:3.8rem">
      <h4 class="detail_title">{{title}}</h4>
      <div class="detail_content">
        {{#content}}
      </div>
  </div>
  <div class="comment" style="padding-bottom:4rem">
    <h4>评论</h4>
    {{each comment_list.reverse() as value index}}
      <div class="comment_body">
        <div class="user_photo">
          <img src="{{comment_list[index].user.avatar.filepath}}" alt="">
        </div>
        <div class="user_message">
          <div class="user_name">{{comment_list[index].user.nickname}}</div>
          <div class="user_comment">{{#comment_list[index].content}}</div>
          <div class="date">
            <span>{{comment_list[index].create_time}}</span>
            <span></span>
          </div>
        </div>
      </div>
      {{/each}}
  </div>
</script>
<script>
  apiready = function() {
      getList()
  }
  var toast = new auiToast({
      })
  function getList() {
    var token = localStorage.getItem("token");
    var articleID = localStorage.getItem("articleID");
    $.ajax({
      type:"get",
      data:{
        id:articleID
      },
      beforeSend:function (request) {
        request.setRequestHeader("token",token)
      },
      url:dns+"action/read/id?id="+articleID,
      success:function(res){
        // console.log(JSON.stringify(res));
        var list = res.data.comment_list;//所有评论列表-数组
        for(var i = 0; i< list.length;i++){
          var msg = list[i].content;//每一项评论
          list[i].content = transEmo(msg)//将转换过的表情img覆盖res中的content
        }
        var html = template("getactiveList",res.data);
        document.getElementById("detail_box").innerHTML = html;
        // 开启评论框模块
        comment()
        $("img").each(function () {
          $(this).click(function () {
            var imgList = [];
            imgList.push($(this).attr("src"))
            var photoBrowser = api.require('photoBrowser');
            photoBrowser.open({
                images: imgList,
                placeholderImg: 'widget://res/img/apicloud.png',
                bgColor: '#000',

            }, function(ret, err) {
                if (ret.eventType == 'click') {
                    photoBrowser.close()
                }
                if (ret.eventType == 'longPress') {
                  var a = Math.floor(Math.random()*1000);
                  var retIndex = ret.index;
                  api.confirm({
                      title: "温馨提示",
                      msg: "是否保存图片?",
                      buttons: ["是", "否"]
                  }, function(ret, err) {
                      if (ret.buttonIndex == 1) { //确认退出
                        api.download({
                            url: imgList[retIndex],
                            savePath: 'fs://'+a+'.jpg',
                            report: true,
                            cache: false
                        }, function(ret, err) {
                            if (ret.state == 1) {
                                //下载成功
                                // console.log("下载成功");
                                // 保存图片
                                api.saveMediaToAlbum({
                                  path :ret.savePath
                                }, function(ret, err) {
                                    if (ret.status==true) {
                                      alert("保存成功!")
                                    } else {
                                    }
                                });
                            } else {

                            }
                        });
                      } else {
                          return;
                      }
                  });
                }
                 else {
                    // alert(JSON.stringify(err));
                }
            });
          })
        })
        $('#submit').attr({
            'data-merchantId':res.data.merchant.id,
            'data-merchantuserId':res.data.merchant.user
        });
      },
      error:function(err){
        console.log(JSON.parse(err.responseText));
      }
    })
  }

  function comment() {
    // 开启评论框
    var UIChatBox = api.require('UIChatBox');
    UIChatBox.open({
      placeholder: '说出你的想法~',
      maxRows: 4,
      emotionPath: 'widget://widget/image/emotion',
      texts: {
          recordBtn: {
              normalTitle: '按住说话',
              activeTitle: '松开结束'
          },
          sendBtn: {
              title: 'send'
          }
      },
      styles: {
          inputBar: {
              borderColor: '#d9d9d9',
              bgColor: '#f2f2f2'
          },
          inputBox: {
              borderColor: '#B3B3B3',
              bgColor: '#FFFFFF'
          },
          emotionBtn: {     //笑脸
              normalImg: '../../widget/image/face1.png'
          },
          keyboardBtn: {     //键盘
              normalImg: '../../widget/image/key1.png'
          },
          // speechBtn: {     //语音
          //     normalImg: '../../widget/image/cam1.png'
          // },
          // recordBtn: {     //“按住 录音”按钮的样式
          //     normalBg: '#c4c4c4',
          //     activeBg: '#999999',
          //     color: '#000',//按钮标题文字的颜色
          //     size: 14
          // },
          indicator: {
              target: 'emotionPanel',
              color: '#c4c4c4',
              activeColor: '#9e9e9e'
          },
          sendBtn: {
              titleColor: '#fff',
              bg: 'rgb(99, 149, 236)',
              activeBg: 'rgb(99, 149, 236)',
              titleSize: 14
          }
      }
  }, function(ret, err) {
    if(ret.eventType=="send"){
      // 获取此时的毫秒数
      var newTime = new Date();
      var getnewTime = newTime.getTime();
      // 获取登陆时的毫秒数
      var getloginTime = localStorage.getItem("getloginTime");
      var Time = getnewTime-getloginTime;
      var token = localStorage.getItem("token");
      var cacheTime = localStorage.getItem("cacheTime");
      if(Time>cacheTime||!token){
        api.confirm({
            title: "当前游客状态",
            msg: "需要前往登录页面,是否继续?",
            buttons: ["是", "否"]
        }, function(ret, err) {
          if(ret.buttonIndex == 1){
            toast.loading({
                    title:"跳转中",
                    duration:2000
                },function(ret){
                    setTimeout(function(){
                        toast.hide();
                    }, 3000)
                });
            setTimeout(function () {
              api.openWin({
                  name: 'login',
                  url: '../system/login.html',
                  allowEdit: true,
                  pageParam: {}, //页面代参数
                  rect: {
                      x: 0,
                      y: 0,
                      w: api.winWidth,
                      h: api.winHeight
                  }
              });
            },1000)
          }
        });
        return false;
      }
    }
      if (ret) {
          var msg = JSON.stringify(ret.msg);
          var msg = msg.substr(1,msg.length-2);
          var msg = msg.trim();
          var token = localStorage.getItem("token");
          var id = localStorage.getItem("articleID");
          if(msg==''){
            toast.fail({
                title:"请输入您想评论的内容!",
                duration:2000
            });
            return false;
          }
          // 发表评论
          $.ajax({
            type:"post",
            data:{
              token:token,
              content:msg,
              type:2,
              article:id
            },
            beforeSend: function(request) {
                request.setRequestHeader("token", token);
            },
            url:dns+"comment/create",
            success:function(res) {
              // console.log(JSON.stringify(res));
              var content = transEmo(res.data.content.content);
              setTimeout(function () {
                toast.success({
                  title:"评论成功!",
                  duration:2000
                });
              },500)
              // 动态添加评论
              var strVar="";
              strVar += "<div class=\"comment_body\">";
              strVar += "        <div class=\"user_photo\">";
              strVar += "          <img src='"+res.data.user.avatar.filepath+"' alt=\"\">";
              strVar += "        <\/div>";
              strVar += "        <div class=\"user_message\">";
              strVar += "          <div class=\"user_name\">"+res.data.user.nickname+"</div>";
              strVar += "          <div class=\"user_comment\">"+content+"</div>";
              strVar += "          <div class=\"date\">";
              strVar += "            <span>"+res.data.content.time+"</span>";
              strVar += "            <span><\/span>";
              strVar += "          <\/div>";
              strVar += "        <\/div>";
              strVar += "      <\/div>";
              $(".comment").append(strVar);
              // 传递评论状态
              api.sendEvent({
                name:"comment2_reload",
                extra: {
                }
              })
              // 收起键盘
              var UIChatBox = api.require('UIChatBox');
              UIChatBox.closeKeyboard();
            }
          })
      } else {
        console.log("评论失败");
          alert(JSON.stringify(err));
      }
  });
  }

  //表情配置信息
  var emoData = [
      {"name": "Expression_1","text": "[微笑]"},
      {"name": "Expression_2","text": "[撇嘴]"},
      {"name": "Expression_3","text": "[色]"},
      {"name": "Expression_4","text": "[发呆]"},
      {"name": "Expression_5","text": "[得意]"},
      {"name": "Expression_6","text": "[流泪]"},
      {"name": "Expression_7","text": "[害羞]"},
      {"name": "Expression_8","text": "[闭嘴]"},
      {"name": "Expression_9","text": "[睡]"},
      {"name": "Expression_10","text": "[大哭]"},
      {"name": "Expression_11","text": "[尴尬]"},
      {"name": "Expression_12","text": "[发怒]"},
      {"name": "Expression_13","text": "[调皮]"},
      {"name": "Expression_14","text": "[呲牙]"},
      {"name": "Expression_15","text": "[惊讶]"},
      {"name": "Expression_16","text": "[难过]"},
      {"name": "Expression_17","text": "[酷]"},
      {"name": "Expression_18","text": "[冷汗]"},
      {"name": "Expression_19","text": "[抓狂]"},
      {"name": "Expression_20","text": "[吐]"},
      {"name": "Expression_21","text": "[偷笑]"},
      {"name": "Expression_22","text": "[愉快]"},
      {"name": "Expression_23","text": "[白眼]"},
      {"name": "Expression_24","text": "[傲慢]"},
      {"name": "Expression_25","text": "[饥饿]"},
      {"name": "Expression_26","text": "[困]"},
      {"name": "Expression_27","text": "[恐惧]"},
      {"name": "Expression_28","text": "[流汗]"},
      {"name": "Expression_29","text": "[憨笑]"},
      {"name": "Expression_30","text": "[悠闲]"},
      {"name": "Expression_31","text": "[奋斗]"},
      {"name": "Expression_32","text": "[咒骂]"},
      {"name": "Expression_33","text": "[疑问]"},
      {"name": "Expression_34","text": "[嘘]"},
      {"name": "Expression_35","text": "[晕]"},
      {"name": "Expression_36","text": "[疯了]"},
      {"name": "Expression_37","text": "[衰]"},
      {"name": "Expression_38","text": "[骷髅]"},
      {"name": "Expression_39","text": "[敲打]"},
      {"name": "Expression_40","text": "[再见]"},
      {"name": "Expression_41","text": "[擦汗]"},
      {"name": "Expression_42","text": "[抠鼻]"},
      {"name": "Expression_43","text": "[鼓掌]"},
      {"name": "Expression_44","text": "[糗大了]"},
      {"name": "Expression_45","text": "[坏笑]"},
      {"name": "Expression_46","text": "[左哼哼]"},
      {"name": "Expression_47","text": "[右哼哼]"},
      {"name": "Expression_48","text": "[哈欠]"},
      {"name": "Expression_49","text": "[鄙视]"},
      {"name": "Expression_50","text": "[委屈]"},
      {"name": "Expression_51","text": "[快哭了]"},
      {"name": "Expression_52","text": "[阴险]"},
      {"name": "Expression_53","text": "[亲亲]"},
      {"name": "Expression_54","text": "[吓]"},
      {"name": "Expression_55","text": "[可怜]"},
      {"name": "Expression_56","text": "[菜刀]"},
      {"name": "Expression_57","text": "[西瓜]"},
      {"name": "Expression_58","text": "[啤酒]"},
      {"name": "Expression_59","text": "[篮球]"},
      {"name": "Expression_60","text": "[乒乓]"},
      {"name": "Expression_61","text": "[咖啡]"},
      {"name": "Expression_62","text": "[饭]"},
      {"name": "Expression_63","text": "[猪头]"},
      {"name": "Expression_64","text": "[玫瑰]"},
      {"name": "Expression_65","text": "[凋谢]"},
      {"name": "Expression_66","text": "[嘴唇]"},
      {"name": "Expression_67","text": "[爱心]"},
      {"name": "Expression_68","text": "[心碎]"},
      {"name": "Expression_69","text": "[蛋糕]"},
      {"name": "Expression_70","text": "[闪电]"},
      {"name": "Expression_71","text": "[炸弹]"},
      {"name": "Expression_72","text": "[刀]"},
      {"name": "Expression_73","text": "[足球]"},
      {"name": "Expression_74","text": "[瓢虫]"},
      {"name": "Expression_75","text": "[便便]"},
      {"name": "Expression_76","text": "[月亮]"},
      {"name": "Expression_77","text": "[太阳]"},
      {"name": "Expression_78","text": "[礼物]"},
      {"name": "Expression_79","text": "[拥抱]"},
      {"name": "Expression_80","text": "[强]"},
      {"name": "Expression_81","text": "[弱]"},
      {"name": "Expression_82","text": "[握手]"},
      {"name": "Expression_83","text": "[胜利]"},
      {"name": "Expression_84","text": "[抱拳]"},
      {"name": "Expression_85","text": "[勾引]"},
      {"name": "Expression_86","text": "[拳头]"},
      {"name": "Expression_87","text": "[差劲]"},
      {"name": "Expression_88","text": "[爱你]"},
      {"name": "Expression_89","text": "[NO]"},
      {"name": "Expression_90","text": "[OK]"},
      {"name": "Expression_91","text": "[爱情]"},
      {"name": "Expression_92","text": "[飞吻]"},
      {"name": "Expression_93","text": "[跳跳]"},
      {"name": "Expression_94","text": "[发抖]"},
      {"name": "Expression_95","text": "[怄火]"},
      {"name": "Expression_96","text": "[转圈]"},
      {"name": "Expression_97","text": "[磕头]"},
      {"name": "Expression_98","text": "[回头]"},
      {"name": "Expression_99","text": "[跳绳]"},
      {"name": "Expression_100","text": "[投降]"},
      {"name": "Expression_101","text": "[激动]"},
      {"name": "Expression_102","text": "[街舞]"},
      {"name": "Expression_103","text": "[献吻]"},
      {"name": "Expression_104","text": "[左太极]"},
      {"name": "Expression_105","text": "[右太极]"}
  ];


  //文字表情转换
  function transEmo(emoMsg){
      var emoPath, transMsg;
                  var reg = /\[(.*?)\]/gm;
                  transMsg = emoMsg.replace(reg, function(match) {
                          for (var i = 0, len = emoData.length; i < len; i++) {
                                  if (emoData[i].text === match) {
                                          emoPath = '../../widget/image/emotion/' + emoData[i].name + '.png';
                                          return '<img width="20" height="20" style="vertical-align:text-bottom" src="' + emoPath + '" />'
                                  }
                          }
                          return match;
                  });
                  return transMsg;
  }






      $("#btn").click(function() {
        // 获取此时的毫秒数
        var newTime = new Date();
        var getnewTime = newTime.getTime();
        // 获取登陆时的毫秒数
        var getloginTime = localStorage.getItem("getloginTime");
        var Time = getnewTime-getloginTime;
        var token = localStorage.getItem("token");
        var cacheTime = localStorage.getItem("cacheTime");
        if(Time>cacheTime||!token){
          api.confirm({
              title: "当前游客状态",
              msg: "需要前往登录页面,是否继续?",
              buttons: ["是", "否"]
          }, function(ret, err) {
            if(ret.buttonIndex == 1){
              toast.loading({
                      title:"跳转中",
                      duration:2000
                  },function(ret){
                      setTimeout(function(){
                          toast.hide();
                      }, 3000)
                  });
              setTimeout(function () {
                api.openWin({
                    name: 'login',
                    url: '../system/login.html',
                    allowEdit: true,
                    pageParam: {}, //页面代参数
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    }
                });
              },1000)
            }
          });
          return false;
        }
          $(".shade").css("display", "block");
          $("html").css("overflow", "hidden");
          $("body").css("overflow", "hidden");
          var UIChatBox = api.require('UIChatBox');
          UIChatBox.hide();
      });


      $("#btn2").click(function() {
        // 获取此时的毫秒数
        var newTime = new Date();
        var getnewTime = newTime.getTime();
        // 获取登陆时的毫秒数
        var getloginTime = localStorage.getItem("getloginTime");
        var Time = getnewTime-getloginTime;
        var token = localStorage.getItem("token");
        var cacheTime = localStorage.getItem("cacheTime");
        if(Time>cacheTime||!token){
          api.confirm({
              title: "当前游客状态",
              msg: "需要前往登录页面,是否继续?",
              buttons: ["是", "否"]
          }, function(ret, err) {
            if(ret.buttonIndex == 1){
              toast.loading({
                      title:"跳转中",
                      duration:2000
                  },function(ret){
                      setTimeout(function(){
                          toast.hide();
                      }, 3000)
                  });
              setTimeout(function () {
                api.openWin({
                    name: 'login',
                    url: '../system/login.html',
                    allowEdit: true,
                    pageParam: {}, //页面代参数
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    }
                });
              },1000)
            }
          });
          return false;
        }
          api.openWin({
              name: 'room_list',
              url: './room_list.html',
              pageParam: {
                'roomid':api.pageParam.roomid,
                'roomtitle':api.pageParam.roomtitle,
              }, //页面代参数
          });
      });


      $(".shade").click(function() {
          $(".shade").css("display", "none");
          $("html").css("overflow", "");
          $("body").css("overflow", "");
          var UIChatBox = api.require('UIChatBox');
          UIChatBox.show();
      });
      $(".box").click(function(e) {
          e.stopPropagation();
      });
      $("#submit").click(function() {
        var action = localStorage.getItem("articleID");
        var merchant_user = $(this).attr('data-merchantuserId');
        var merchant = $(this).attr('data-merchantId');
        var name = $("input[name='username']").val();
        var mobile = $("input[name='usertel']").val();

        console.log(action,merchant_user,merchant,name,mobile);
        console.log(typeof(merchant_user));
        console.log(typeof(action));

        var token = localStorage.getItem('token');
        var datalist = {
          'action': action,
          'merchant_user': merchant_user,
          'merchant': merchant,
          'name': name,
          'mobile': mobile
        }
          if(datalist.name == '' || datalist.mobile == ''){
            toast.fail({
                title:"用户名或手机号不能为空!",
                duration:2000
            });
            return false;
          }
            $("#submit").attr("disabled","disabled")
            $.ajax({
               url: dns + 'user/booking',
               type: 'POST',
               data: datalist,
               dataType:"text",
               beforeSend: function(request) {
                   request.setRequestHeader("token",token);
                },
               success: function (res) {
                 $(".shade").css("display", "none");
                 $("input[name='username']").val('');
                 $("input[name='usertel']").val('');
                   $("html").css("overflow", "hidden");
                   $("body").css("overflow", "hidden");
                   $(".success").css("display", "block");
                   setTimeout(function(){
                     api.openWin({
                         name: 'order',
                         url: '../frame4/order/index.html',
                         allowEdit:true,
                         pageParam: {}, //页面代参数
                     });
                   },1000)
                  setTimeout(function () {
                    $("#submit").removeAttr("disabled");
                  },1000);
               },
               error: function (err) {
                 var json = JSON.parse(err.responseText);
                 alert(json);
                 alert(JSON.parse(err.responseText).msg);
                 toast.fail({
                     title:json.msg,
                     duration:2000
                 });
               }
              });
      });

      $(".success").click(function() {
          $(".success").css("display", "none");
          var UIChatBox = api.require('UIChatBox');
          UIChatBox.show();
          $("html").css("overflow", "");
          $("body").css("overflow", "")
      });
      $(".success_box").click(function(e) {
          e.stopPropagation();
      });
      //分享
      function share_wx () {
        // 获取此时的毫秒数
        var newTime = new Date();
        var getnewTime = newTime.getTime();
        // 获取登陆时的毫秒数
        var getloginTime = localStorage.getItem("getloginTime");
        var Time = getnewTime-getloginTime;
        var token = localStorage.getItem("token");
        var cacheTime = localStorage.getItem("cacheTime");
        if(Time>cacheTime||!token){
          api.confirm({
              title: "当前游客状态",
              msg: "需要前往登录页面,是否继续?",
              buttons: ["是", "否"]
          }, function(ret, err) {
            if(ret.buttonIndex == 1){
              toast.loading({
                      title:"跳转中",
                      duration:2000
                  },function(ret){
                      setTimeout(function(){
                          toast.hide();
                      }, 3000)
                  });
              setTimeout(function () {
                api.openWin({
                    name: 'login',
                    url: '../system/login.html',
                    allowEdit: true,
                    pageParam: {}, //页面代参数
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    }
                });
              },1000)
            }
          });
          return false;
        }
        $.ajax({
          type:"get",
          beforeSend:function (request) {
            request.setRequestHeader("token",token)
          },
          data:{
            action:2
          },
          url:dns+"user/add/integral",
          success:function(res){
          },
          error:function(err){
            console.log(JSON.parse(err.responseText).msg);
          }
        })
        var articleID = localStorage.getItem("articleID");
        var wx = api.require('wx');
          wx.isInstalled(function(ret, err) {
          if (ret.installed) {
            wx.shareWebpage({
                apiKey: 'wx99475b10511a3195',
                scene: 'timeline',
                title: $('.detail_title').html(),
                description: 'desc',
                // contentUrl: url + '/SXapp/html/frame0/article.html'
                contentUrl:'http://www.jinshouzhou.com/h5/html/index.html?id='+articleID
                }, function(ret, err) {
                  // console.log(JSON.stringify(ret));
                    if (ret.status==true) {
                      toast.success({
                          title:"分享成功",
                          duration:1500
                      });
                    } else {
                        toast.fail({
                            title:"取消分享!",
                            duration:1500
                        });
                    }
                });

            } else {
              toast.fail({
                  title:"当前设备未安装微信客户端!",
                  duration:1500
              });
            }
          });
        }
</script>
